import React, { useState } from 'react'
import { NavBar, Toast, } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import "../css3/merch3.scss"
import 'animate.css';
export default function Merch3() {
    const navigate = useNavigate()
  return (
    <div className='mer animate__animated animate__bounceInLeft'>
      {/* 返回 */}
      <NavBar
        title="商家主页"
        onClickLeft={() => Toast('返回', navigate('/issue3'))}
      />






      <div className='toux'>
        <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.uMf5AX3a6yYpIhpEkyDxiQAAAA?rs=1&pid=ImgDetMain" alt="" />
        <div>
          <h5>老笔斋的老猫</h5>
          <p style={{ marginTop: '10px',fontSize: '12px' }}>愿得一人心,白首不相离</p>
        </div>
      </div>
      <h4 style={{color:"#99BBFF",marginTop:"10px",marginBottom:"10px",marginLeft:"15px"}}>TA的交易</h4>
      <div className='zaishou'>
        
        <div className='zuo2'>
          <p style={{fontSize:'80px'}}>1</p>
          <p>在售商品</p>
        </div>
        <div className='you2'>
          <p style={{fontSize:'80px'}}>1</p>
          <p>在售商品</p>

        </div>

      </div>
      
      <h4 style={{color:"#99BBFF",marginTop:"10px",marginBottom:"10px",marginLeft:"15px"}}>Ta的评价</h4>
      <div className='ping'>
        <h4>好评率</h4>
        <p style={{color:"#99BBFF"}}>100%</p>
      
      </div>

      <div className='ping'>
        <h4>发货时间</h4>
        <p style={{color:"#99BBFF"}}>1天</p>
      </div>

      <div className='ping'>
        <h4>商品互动率</h4>
        <p style={{color:"#99BBFF"}}>67%</p>
      </div>
      <button className='liao' onClick={()=> navigate("/message")}>聊一聊</button>

    </div>
  )
}
